<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('任务处理')" />
    <th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: datetimepicker-css" />
	<th:block th:include="include :: select2-css" />
	<style>
		.download-file{
			margin-right: 4px;
			line-height: 30px;
			cursor: pointer;
			color: #17a2b8;
		}
		.remove-file{
			margin-right: 10px;
			line-height: 30px;
			cursor: pointer;
			color: red;
		}
		.a-file{
			margin-right: 26px;
			line-height: 30px;
		}
		.file-div{
			background: aliceblue;
			text-align: right;
			font-size: 14px;
			line-height: 30px;
			margin-bottom: 3px;
			width: 84%;
			align-self: flex-end;
		}
	</style>
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="m" id="form-instance-add">

			<input id="sysProcessId" type="hidden" name="sysProcessId" th:value="${sysProcessId}">
			<div th:utext="${content}"></div>


			<div style="text-align: right"><a href=""></a></div>
		</form>
	</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
var prefix = ctx + "act/processDefinition";
function submitHandler() {

		$.operate.save(prefix + "/startSysProcessByForm", $('#form-instance-add').serialize());

}

var laydate;

$(function(){
	initSelect2();
	initDatetime();
	$("input[type='file']").change(function(){
		debugger
		var formdata = new FormData();
		formdata.append("processFile", $('input[type=file]')[0].files[0]);
		formdata.append("sysProcessId", $("#sysProcessId").val());
		$.ajax({
			url: prefix + "/uploadProcessFile",
			data: formdata,
			type: "post",
			processData: false,
			contentType: false,
			success: function(result) {
				debugger;
				$("input[type='file']")[0].value='';
				var processFile = result.data;
				var container = $($("input[type='file']").parents(".drag-container")[0]);
				var timestamp = new Date().getTime();
				var file =
						'<div class="file-div" id="'+timestamp+'">'+
							'<span class="a-file">'+processFile.fileName+'</span>'+
							'<span class="glyphicon glyphicon-save download-file" onclick="downloadFile(\''+processFile.path+'\',\''+processFile.fileName+'\')"></span>'+
							'<span class="glyphicon glyphicon-remove remove-file" onclick="removeFile(\''+processFile.realName+'\',\''+timestamp+'\')"></span>'+
						'</div>';
				container.append(file);
				var file_input_real = container.find(".real");
				if(file_input_real.val().trim()){
					file_input_real.val(file_input_real.val().trim() + "," + processFile.realName);
				}else{
					file_input_real.val(processFile.realName);
				}
			}
		})
	})
});

/**
 * 初始化select2组件
 */
function initSelect2(){
	$(".select2").remove();
	$(".drag-item select").removeClass("select2-hidden-accessible");
	$(".drag-item select option").removeAttr("data-select2-id");
	$(".drag-item select").select2();
}

/**
 * 初始化日期组件
 */
function initDatetime(){
	var arr = $(".drag-item");
	layui.use('laydate', function() {
		laydate = layui.laydate;
		for(var i=0 ; i<arr.length ; i++){
			var c = arr[i];
			if(c.dataset.type == "drag_datetime"){
				var reals = $(c).find(".real");
				for(var j=0 ; j<reals.length ; j++){
					laydate.render({
						elem: '#'+$(reals[j]).attr("id"),
						type: 'datetime',
						trigger: 'click'
					});
				}
			}
		}
	});
}

function downloadFile(path, fileName){
	window.location.href = prefix + "/download?path=" + encodeURI(path) + "&fileName=" + fileName;
}

function removeFile(realName, timestamp) {
	$.ajax({
		url: prefix + "/removeFile?realName="+realName,
		success: function (res) {
			debugger;
			$("#"+timestamp).remove();
			var container = $($("input[type='file']").parents(".drag-container")[0]);
			var file_input_real = container.find(".real");
			var realNames = file_input_real.val();
			var realNames2 = (","+realNames+",").replace(","+realName+",", ",");
			if(realNames2 != ""){
				var realNames3 = realNames2.substr(1, realNames2.length-2);
				file_input_real.val(realNames3);
			} else {
				file_input_real.val("");
			}
		}
	})
}
</script>
</body>
</html>